package com.example.finalhomework.firsthomework

import android.util.Log
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.unit.sp
import androidx.navigation.NavHostController
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.finalhomework.R

@Composable
fun ManyHelloWorld(navController: NavHostController) {
    // 获取初始文本资源
    val initialText = stringResource(R.string.TextView)
    // 使用 remember 保存可变状态的文本
    var text by remember { mutableStateOf(initialText) }
    // 使用 rememberUpdatedState 确保在 onClick 事件中使用最新的 stringResource 值
    val updatedText = rememberUpdatedState(newValue = stringResource(R.string.clicked))

    // 创建一个垂直排列的列布局
    Column(
        modifier = Modifier
            .fillMaxSize() // 填充整个屏幕
            .padding(16.dp), // 设置内边距
        horizontalAlignment = Alignment.CenterHorizontally, // 水平居中对齐
        verticalArrangement = Arrangement.Center // 垂直居中对齐
    ) {
        // 显示图片
        Image(
            painter = painterResource(R.drawable.flag), // 加载图片资源
            contentDescription = null, // 图片描述
            modifier = Modifier
                .fillMaxWidth() // 图片宽度填充父布局
                .height(200.dp) // 设置图片高度
        )
        Spacer(modifier = Modifier.height(16.dp)) // 添加高度为 16dp 的空白间隔
        // 显示文本
        Text(
            text = text, // 显示的文本内容
            fontSize = 30.sp // 设置字体大小
        )
        Spacer(modifier = Modifier.height(16.dp)) // 添加高度为 16dp 的空白间隔
        // 创建按钮
        Button(
            onClick = {
                // 按钮点击事件，更新文本内容
                text = updatedText.value
                Log.d("ManyHelloWorld", "Button clicked, text updated to: ${updatedText.value}")
            },
            modifier = Modifier.padding(top = 16.dp) // 设置按钮的上边距
        ) {
            // 按钮上的文本
            Text(text = stringResource(R.string.button))
        }
    }
    Log.d("ManyHelloWorld", "Button clicked, text updated to: ${updatedText.value}")
}

@Preview
@Composable
fun PreviewManyHelloWorld() {
    ManyHelloWorld(NavHostController(LocalContext.current))
}